import React, { useState, useEffect } from 'react';
import { Pagination } from 'antd';
import { withRouter } from 'react-router-dom';
import style from './index.module.less';
import { getFavorableDataList } from '../../api/medicalHotspots';

const PublishCase = (props: any) => {
    const [queryParams, setQueryParams] = useState({
        pageNo: 1,
        pageSize: 10,
        total: 11,
    });
    useEffect(() => {
        getListData();
    }, [queryParams.pageNo]);
    const [list, setList] = useState([]);

    // 获取列表数据
    const getListData = async () => {
        const res: any = await getFavorableDataList({
            pageNo: queryParams.pageNo,
            pageSize: queryParams.pageSize,
        });
        setQueryParams({
            ...queryParams,
            total: res.data.total,
        });
        setList(res.data.list);
    };

    // 分页
    const handlePageChange = (page: number) => {
        setQueryParams({
            ...queryParams,
            pageNo: page,
        });
    };

    const handleLink = (url: string) => {
        window.open(url);
    };

    return (
        <>
            <div className={style.publish_header} />
            <div className={style.medica_title}>
                <div className={`h2 strong ${style.blue}`}>
                    有关心、有关注、有观点&nbsp;&nbsp;有服务、有耐心、有热忱
                </div>
                <div className="h3 strong">万方寰宇 期待成为您的同路人</div>
            </div>
            <div className={style.acknowled_body}>
                {list.map((item: any) => {
                    return (
                        <div
                            className={style.acknowled_item}
                            key={item.hotspotsId}
                            onClick={() => handleLink(item.articleLink)}
                        >
                            <div className={style.item_left}>
                                <img
                                    src={item.fileId ? item.busiFile.covertPath : ''}
                                    alt="图片加载失败"
                                />
                            </div>
                            <div className={style.item_right}>
                                <div className={`h3 strong ${style.h3}`}>{item.articleTitle}</div>
                                <div className="h4">{item.articleContent}</div>
                            </div>
                        </div>
                    );
                })}
            </div>
            {queryParams.total > 10 && (
                <div className={style.pagination_body}>
                    <Pagination
                        defaultCurrent={queryParams.pageNo}
                        total={queryParams.total}
                        onChange={handlePageChange}
                    />
                </div>
            )}
        </>
    );
};

export default withRouter(PublishCase);
